<template>
  <div class="space-y-6">
    <!-- 平行宇宙设定 -->
    <UiStatusMessage v-if="movie.universe" type="hologram" class="p-4">
      <div class="flex items-center gap-2">
        <span class="text-primary-300 font-semibold">平行宇宙设定</span>
      </div>
      <p class="text-text-secondary text-sm">{{ movie.universe }}</p>
    </UiStatusMessage>

    <!-- 剧情 -->
    <div v-if="movie.plot" class="space-y-2">
      <h3 class="text-text-primary font-semibold">剧情</h3>
      <p class="text-text-secondary leading-relaxed">{{ movie.plot }}</p>
    </div>

    <!-- 演职人员 -->
    <div class="space-y-2">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h3 class="text-text-primary font-semibold mb-2">导演</h3>
          <p class="text-text-secondary">{{ movie.director }}</p>
        </div>
        <div>
          <h3 class="text-text-primary font-semibold mb-2">主演</h3>
          <p class="text-text-secondary">{{ movie.actors.join('、') }}</p>
        </div>
      </div>
    </div>

    <!-- 详细信息区域 -->
    <div class="space-y-6">
      <!-- 制作信息和花絮的网格布局 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 制作信息 -->
        <div class="card">
          <h3 class="text-text-primary font-semibold mb-4">制作信息</h3>
          <div class="space-y-3 text-sm">
            <div class="flex justify-between">
              <span class="text-text-muted">语言</span>
              <span class="text-text-secondary">{{ movie.language }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-text-muted">国家/地区</span>
              <span class="text-text-secondary">{{ movie.country }}</span>
            </div>
            <div v-if="movie.budget" class="flex justify-between">
              <span class="text-text-muted">预算</span>
              <span class="text-text-secondary">{{ movie.budget }}</span>
            </div>
            <div v-if="movie.boxOffice" class="flex justify-between">
              <span class="text-text-muted">票房</span>
              <span class="text-text-secondary">{{ movie.boxOffice }}</span>
            </div>
          </div>
        </div>

        <!-- 花絮信息 -->
        <div v-if="movie.trivia && movie.trivia.length > 0" class="card">
          <h3 class="text-text-primary font-semibold mb-4">花絮</h3>
          <div class="space-y-3">
            <div
              v-for="(item, index) in movie.trivia"
              :key="index"
              class="flex items-start gap-3 text-sm"
            >
              <span class="w-2.5 h-2.5 rounded-full bg-primary-400 mt-1 flex-shrink-0"></span>
              <span class="text-text-secondary">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 获奖信息 - 独立占满宽度 -->
      <div v-if="movie.awards && movie.awards.length > 0" class="card">
        <h3 class="text-text-primary font-semibold mb-4">获奖记录</h3>
        <div class="space-y-2">
          <div v-for="award in movie.awards" :key="award" class="flex items-center gap-2 text-sm">
            <svg class="w-4 h-4 text-warning" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
              />
            </svg>
            <span class="text-text-secondary">{{ award }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue'
  import { UiStatusMessage } from '../ui'
  import type { MovieDetail } from '../../types/ui'

  const props = defineProps<{
    movie: MovieDetail
  }>()
</script>
